<template>
  <div>
    <!-- 顶部栏 -->
    <van-nav-bar
      title="奈雪的茶"
      left-arrow
      fixed
      @click.native="$router.go(-1)"
      safe-area-inset-top
    >
    </van-nav-bar>

    <div class="pd" v-for="item in detail">
      <!-- 商品图片 -->
      <div class="pd_img">
        <img :src="shopURL + item.pic" alt="" />
      </div>
      <div class="con_middle">
        <!-- 介绍 -->
        <div class="pd_jieshao">
          <h4>{{ item.names }}</h4>
          <div>{{ item.subtit }}</div>
          <p>{{ item.details }}</p>
        </div>
        <!-- 加料 -->
        <div class="pd_feeding">
          <span>加料</span>
          <div>
            <div>燃爆菌￥4.00</div>
            <div>0卡糖￥1.00</div>
          </div>
        </div>
        <!-- 糖度 -->
        <div class="pd_Sugar">
          <span>糖度</span>
          <div v-html="item.Sugar"></div>
        </div>
        <!-- 温度 -->
        <div class="pd_temperature">
          <span>温度</span>
          <div v-html="item.temperature"></div>
        </div>
        <!-- 吸管 -->
        <div class="pd_straw">
          <span>环保奈雪</span>
          <div v-html="item.straw"></div>
        </div>
      </div>
    </div>
    <!-- 商品数量变化 -->
    <div class="add">
        <div class="add_left">
          <div> 
            <span>￥</span>
            <span>{{total}}</span>
          </div>
          <div>
            <span>123</span><span>/</span>
            <span>123</span><span>/</span>
            <span>123</span><span>/</span>
            <span>123</span>
          </div>
        </div>
        <div class="add_right">
          <van-stepper
            v-model="value"
            theme="round"
            button-size="26"
            disable-input
          />
        </div>
      </div>
    <!-- 购物车 -->
    <div class="cart">
      <van-goods-action>
        <van-goods-action-icon icon="cart-o" text="购物车" @click="" />
        <van-goods-action-icon icon="shop-o" text="店铺" />
        <van-goods-action-button
          color="#be99ff"
          type="warning"
          text="加入购物车"
        />
        <van-goods-action-button
          color="#7232dd"
          type="danger"
          text="立即购买"
        />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["shopURL"]),
  },
  props: ["lid"],
  data() {
    return {
      // 商品详情信息
      detail: [],
      value: 1,
      total:null,//商品总价
    };
  },
  methods: {
    //计算总价方法
    getTotal() {
      this.total=this.value*this.detail[0].price.toFixed(2)
    },
    //商品详情接口数据
    getProDetail() {
      // 从商品页获取id
      const url = `tea/query?lid=${this.lid}`;
      this.axios.get(url).then((res) => {
        console.log("商品详情", res);
        this.detail = res.data.data;
        this.total=res.data.data[0].price
      });
    },
  },
  mounted() {
    this.getProDetail();
  },
  watch: {
    value(newValue, oldValue) {
       this.getTotal()
    }
  },
};
</script>

<style lang="scss">
//商品详情样式
.pd {
  width: 100vw;
  margin: 46px 0 50px 0;
  //顶部图片
  .pd_img {
    text-align: center;
    img {
      width: 60%;
    }
  }
  //中间的部分
  .con_middle {
    padding: 0 4vw;
    overflow-y: scroll;
    height: 60vw;
    //  商品简介
    .pd_jieshao {
      div {
        color: #f0a4a4;
        font-size: 3.5vw;
        margin-top: 2vw;
      }
      p {
        color: #838487;
        margin-top: 3vw;
        font-size: 4vw;
      }
    }
    //商品选配
    .pd_feeding,
    .pd_Sugar,
    .pd_temperature,
    .pd_straw {
      margin-top: 3vw;
      span {
        color: #242524;
        font-size: 4vw;
      }
      div {
        display: flex;
        flex-wrap: wrap;
        margin-top: 2vw;
        div {
          padding: 4vw;
          border: 1px solid #e2e5e7;
          border-radius: 2vw;
          color: #838487;
          font-size: 3.5vw;
          margin-left: 5vw;
          display: flex;
          align-items: center;
          .img {
            width: 5vw;
            padding: 0;
            margin: 0;
            border: 0;
            img {
              width: 100%;
              display: block;
            }
          }
          div:nth-child(2) {
            margin: 0;
            padding: 0;
            border: 0;
            span {
              font-size: 3.5vw;
              color: #838487;
            }
          }
        }
      }
    }
  }
}
//商品数量变化
.cart{
     bottom: 0;
    position: fixed;
}
.add{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3vw;
    margin-top: -10vw;
    .add_left{
       div:first-child{
         font-size: 6vw;
       }
       div:last-child{
         font-size: 4vw;
         color: #707275;
       }
    }
    .add_right{
        margin-left: 20vw;
    }
  }
</style>